<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>流通产品-疫苗专项分析</title>
    <link rel="stylesheet" href="../src/css/modal.css">
    <link rel="stylesheet" href="../src/css/index.css">
    <link rel="stylesheet" href="../src/css/common.css">
    <link rel="stylesheet" href="../src/css/ymzxfx.css">
    <style>
        #myModal td,
        #myModal2 td {
            height: auto;
            padding: 8px;
            line-height: 1.3em;

        }
    </style>
    <script>
        (function setPageScale(window, document) {
            function setBodyScale() {
                var zoom = (window.innerHeight / 1080).toFixed(3)
                if (document.body) {
                    document.body.style.transform = 'translate(-50%, -50%) scale(' + zoom + ')';
                } else {
                    document.addEventListener('DOMContentLoaded', setBodyScale)
                }
            }
            setBodyScale();
            // reset scale unit on page resize窗口改变时候重新设置缩放
            window.addEventListener('resize', setBodyScale)
            window.addEventListener('pageshow', function (e) {
                if (e.persisted) {
                    setBodyScale()
                }
            })
        }(window, document))
    </script>
    <!--[if lt IE 9]>
        <script src="../src/js/html5shiv.min.js"></script>
        <![endif]-->
</head>

<body>
    <div class="wrapper" id="app">
        <!-- Modal不良反应列表
-->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog" style="width:1460px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">不良反应列表

                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="a-table-list">
                            <table>
                                <colgroup>
                                    <col style="width:90px" />
                                    <col />
                                    <col />
                                    <col />
                                    <col />
                                    <col />
                                    <col />
                                    <col />

                                </colgroup>
                                <thead>
                                    <tr>
                                        <td>序号</td>
                                        <td>商品名称</td>
                                        <td>通用名称</td>
                                        <td>批准文号 </td>
                                        <td>剂型</td>
                                        <td>不良反应名称</td>
                                        <td>不良反应发生时间</td>
                                        <td>不良反应结果</td>

                                    </tr>
                                    </tr>
                                </thead>
                            </table>
                            <div class="scroll-content" style="max-height:290px;overflow-y: auto;overflow-x: hidden;">
                                <table>
                                    <colgroup>
                                        <col style="width:90px" />
                                        <col />
                                        <col />
                                        <col />
                                        <col />
                                        <col />
                                        <col />
                                        <col />
                                    </colgroup>

                                    <tbody>
                                        <tr>
                                            <td>1</td>

                                            <td>重组乙亚单位/菌体霍乱疫苗（肠溶胶囊）儿</td>
                                            <td>
                                                华东医药
                                            </td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>1</td>

                                            <td>重组乙亚单位/菌体霍乱疫苗（肠溶胶囊）儿</td>
                                            <td>
                                                华东医药
                                            </td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>

        <!-- 抽样检测列表
-->
        <div class="modal fade" id="myModal2">
            <div class="modal-dialog" style="width:1460px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">抽样检测列表

                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="a-table-list">
                            <table>
                                <colgroup>
                                    <col style="width:90px" />
                                    <col />
                                    <col />
                                    <col />
                                    <col />
                                    <col />
                                    <col />
                                    <col />

                                </colgroup>
                                <thead>
                                    <tr>
                                        <td>序号</td>
                                        <td>药品名称</td>
                                        <td>批号</td>
                                        <td>剂型 </td>
                                        <td>批准文号</td>
                                        <td>报告书编号</td>
                                        <td>抽样日期</td>
                                        <td>检验结果</td>

                                    </tr>
                                </thead>
                            </table>
                            <div class="scroll-content" style="max-height:290px;overflow-y: auto;overflow-x: hidden;">
                                <table>
                                    <colgroup>
                                        <col style="width:90px" />
                                        <col />
                                        <col />
                                        <col />
                                        <col />
                                        <col />
                                        <col />
                                        <col />
                                    </colgroup>

                                    <tbody>
                                        <tr>
                                            <td>1</td>

                                            <td>重组乙亚单位/菌体霍乱疫苗（肠溶胶囊）儿</td>
                                            <td>
                                                华东医药
                                            </td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>1</td>

                                            <td>重组乙亚单位/菌体霍乱疫苗（肠溶胶囊）儿</td>
                                            <td>
                                                华东医药
                                            </td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="global-content">
            <header class="header">
            </header>
            <section class="main clearfix">
                <nav class="navs">
                    <div class="nav-item">
                        <a href="javascript:;" class="ltcp on">
                            流通产品
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="./jyqy.html" class="jyqy  ">
                            <span class="badge">2</span>

                            经营企业
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="./qtxx.html" class="qtxx ">
                            <span class="badge">2</span>

                            其他信息
                        </a>
                    </div>


                </nav>
                <div class="content-box ">
                    <div class="ready_container " :class="isReady?'data-ready':''">

                        <div class="content-box-area flex">
                            <div class="cb-left ">
                                <div class="s-title s-title-1"></div>
                                <div>
                                    <div class="search_content mb20 pl20 pt10 pb20 f16 ">

                                        <div class="fx-item flex mb10 mt20">
                                            <div class="flex-1 ">
                                                <span class="l-name l-width-2">疫苗类型：</span>
                                                <span>
                                                    <select class="form-control  inline-block w1">
                                                        <option value="1">I类疫苗</option>
                                                        <option value="2">I类疫苗</option>
                                                        <option value="3">I类疫苗</option>
                                                    </select>

                                                </span>
                                            </div>
                                            <div class="flex-1 ">
                                                <span class="l-name l-width-2">企业：</span>
                                                <span>
                                                    <select class="form-control  inline-block w1">
                                                        <option value="1">这里是企业名称</option>
                                                        <option value="2">这里是企业名称</option>
                                                        <option value="3">这里是企业名称</option>
                                                    </select>

                                                </span>
                                            </div>
                                            <div class="flex-1 ">
                                                <span class="l-name l-width-2">产品：</span>
                                                <span>
                                                    <select class="form-control  inline-block w1">
                                                        <option value="1">产品1</option>
                                                        <option value="2">产品2</option>
                                                        <option value="3">产品3</option>
                                                    </select>

                                                </span>
                                            </div>
                                        </div>
                                        <div class="fx-item flex mb10">
                                            <div class="flex-1  ">
                                                <span class="l-name l-width-2 ">时间：</span>
                                                <span>
                                                    <input type="text" placeholder="" class="form-control  w2">
                                                    <span class="color-blue"> - </span>
                                                    <input type="text" placeholder="" class="form-control  w2">
                                                </span>
                                            </div>
                                            <div class="flex-1 ">
                                                <span class="l-name l-width-2">批号：</span>
                                                <span>
                                                    <select class="form-control  inline-block w1">
                                                        <option value="1">批号1</option>
                                                        <option value="2">批号2</option>
                                                        <option value="3">批号3</option>
                                                    </select>
                                                </span>

                                            </div>

                                            <div class="flex-1 text-right ">
                                                <button class="mr15" @click="submitForm">提交</button>
                                            </div>
                                        </div>


                                    </div>
                                </div>
                                <div>
                                    <div class="map_container text-center">
                                        <div class="country_map">
                                            <div>
                                                <v-chart :options="stat4.chartOption" class="echart_c_4 inline-block"
                                                    @mouseover="hoverMap" />
                                            </div>
                                            <!--地图上的悬浮框-->
                                            <div v-if="stat4.tipInfo.data&&stat4.tipInfo.data.name" class="tip-info"
                                                :style="{top:stat4.tipInfo.position.y+'px',left:stat4.tipInfo.position.x+'px'}">
                                                {{stat4.tipInfo.data.name}}<br>
                                                流入总量：{{stat4.tipInfo.data.otherValue.lrzl||0}}<br>
                                                异常反应发生数：{{stat4.tipInfo.data.otherValue.ycfyfss||0}}<br>
                                                异常反应发生率：{{stat4.tipInfo.data.otherValue.ycfyfsl||0}}
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>
                            <div class="cb-right relative">
                                <!--i类疫苗生产企业及流入数量-->
                                <div class="stat-2 mb10">
                                    <div class="s-title s-title-2"></div>
                                    <div class="table-container pt20">
                                        <table class="text-center f16">
                                            <tr>
                                                <th style="width: 220px">产品名称</th>
                                                <th style="width: 140px">来源企业</th>
                                                <th style="width: 140px">全省流入总量</th>

                                            </tr>
                                            <!-- <template > -->
                                            <tr v-for="(item,index) in stat2.productList">
                                                <td>{{item.name}}</td>
                                                <td>{{item.qy}}</td>
                                                <td>{{item.qslrzl}}人份</td>

                                            </tr>
                                            <!-- </template> -->
                                        </table>
                                    </div>
                                </div>
                                <!--i类疫苗近半年使用量及异常反应量-->
                                <div class="stat-3 mb10">
                                    <div class="s-title s-title-3"></div>
                                    <div class="n-t-table">
                                        <table>
                                            <tr>
                                                <td class="bg1">产品名称</td>
                                                <td colspan="3">AC群脑膜炎球菌（结合）b型流感嗜血杆菌</td>
                                            </tr>
                                            <tr>
                                                <td class="bg1">生产企业名称</td>
                                                <td colspan="3">AC群脑膜炎球菌（结合）b型流感嗜血杆菌</td>
                                            </tr>
                                            <tr>
                                                <td class="bg1">储配企业名称</td>
                                                <td colspan="3">AC群脑膜炎球菌（结合）b型流感嗜血杆菌</td>
                                            </tr>
                                            <tr>
                                                <td class="bg1" rowspan="4">产品风险分析</td>
                                                <td class="b2">1、温湿度</td>
                                                <td class="b2">是否正常</td>
                                                <td class="click-txt">是</td>
                                            </tr>
                                            <tr>
                                                <td class="b2">2、不良反应</td>
                                                <td class="click-txt" colspan="2" data-toggle="modal"
                                                    data-target="#myModal">0</td>

                                            </tr>
                                            <tr>
                                                <td class="b2">3、抽样检测</td>
                                                <td class="click-txt" data-toggle="modal" data-target="#myModal2"
                                                    colspan="2">0</td>

                                            </tr>
                                            <tr>
                                                <td class="b2">4、投诉举报</td>
                                                <td class="click-txt" colspan="2">0</td>

                                            </tr>
                                        </table>
                                    </div>
                                    <!-- <v-chart :options="stat3.chartOption" class="echart_c_3" /> -->
                                </div>


                            </div>


                        </div>
                    </div>

                </div>
            </section>
        </div>

        <img src="../src/img/back.png" class="go-back" @click="goBack">
    </div>
</body>
<script type="text/javascript" src="../src/js/jquery-1.11.1.min.js"></script>
<script src="../src/js/vue.min.js"></script>
<script src="../src/js/echarts.js"></script>
<script src="../src/js/vue-echarts@4.0.2"></script>
<script src="../src/js/modal.min.js"></script>
<script src="../src/js/chart-options-ymzxfx.js"></script>
<script type="text/javascript" src="../src/js/ymzxfx.js"></script>

</html>